<template>
  <view class="mt-more-column-checkbox">
    <mt-popup ref="popupRef" :title="title" :top-confirm="false" close-on-click-overlay show-footer @reset="handleReset" @confirm="handleConfirm">
      <view class="mt-more-checkbox_content">
        <view v-if="showCheckName && checkName.length" class="checked-box">
          <text class="text-28rpx text-#1C213E pt-8rpx">当前选择：</text>
          <view class="content">
            <text v-for="(item, index) in checkName.slice(0, 3)" :key="item" class="tag">
              {{ index > 1 ? '...+' + (checkName.length - index) : item }}
            </text>
          </view>
        </view>
        <view class="mt-more-checkbox_scroll" :style="{ 'padding-top': showCheckName && checkName.length ? 0 : '30rpx' }">
          <view class="w-full">
            <scroll-view class="scroll-view first" scroll-y>
              <view v-for="(item, index) in firstList" :key="item[value]" class="scroll-li">
                <view class="scroll-li_content" @click="handleChangeFirstCheck(item)">
                  <view class="txt">
                    <slot name="first" :row="item" :index="index">
                      <text>{{ item[label] }}</text>
                    </slot>
                  </view>
                  <view class="w-32rpx h-32rpx">
                    <image
                      v-if="!item._checked"
                      class="w-32rpx h-32rpx"
                      src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-checkbox.svg"
                    ></image>
                    <image
                      v-if="item._checked"
                      class="w-32rpx h-32rpx"
                      src="https://mingtu-resources.oss-cn-shenzhen.aliyuncs.com/mtym-app-assets/icon-checkbox-select.svg"
                    ></image>
                  </view>
                </view>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
    </mt-popup>
  </view>
</template>

<script setup>
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  title: {
    type: String,
    default: '选择产品类别'
  },
  label: {
    type: String,
    default: 'name'
  },
  value: {
    type: String,
    default: 'id'
  },
  child: {
    type: String,
    default: 'children'
  },
  confirmClose: {
    type: Boolean,
    default: true
  },
  showCheckName: {
    type: Boolean,
    default: false
  }
});

const emits = defineEmits(['confirm']);

const firstList = ref([]);

watch(
  () => props.list,
  (newVal) => {
    if (newVal && newVal.length) {
      let arr = JSON.parse(JSON.stringify(newVal));

      firstList.value = arr;
    } else {
      firstList.value = [];
    }
  },
  { immediate: true }
);
// 最终选择的数据 value
const checkResultId = defineModel({ type: Array });
// 选择的数据 name
const checkName = ref([]);
// 选择的数据 value
const checkId = ref([]);

function handleChangeFirstCheck(item) {
  item._checked = !item._checked;
  if (item._checked) {
    checkId.value.push(item.id);
    checkName.value.push(item.productCategoryName);
  } else {
    const index = checkId.value.findIndex((son) => item.id === son);
    checkId.value.splice(index, 1);
    checkName.value.splice(index, 1);
  }
}

function handleInitSelect(checkData, data) {
  for (const item of data) {
    const obj = checkData.find((son) => item.id === son);
    item._checked = !!obj;
  }
}

const popupRef = ref();
function open() {
  console.log(checkResultId.value);
  let arr = JSON.parse(JSON.stringify(firstList.value));
  let ids = JSON.parse(JSON.stringify(checkResultId.value));
  handleInitSelect(ids, arr);
  checkId.value = ids;
  firstList.value = arr;

  popupRef.value.open();
}

function close() {
  popupRef.value.close();
}

function handleReset() {
  let arr = JSON.parse(JSON.stringify(firstList.value));
  for (const item of arr) {
    item._checked = false;
  }
  checkId.value = [];
  checkName.value = [];
  firstList.value = arr;
}

function handleConfirm() {
  const result = [];
  // const result = getSelectNode();
  const valueArray = JSON.parse(JSON.stringify(checkId.value));
  checkResultId.value = valueArray;

  emits('confirm', valueArray, result);

  if (props.confirmClose) {
    close();
  }
}

defineExpose({
  open,
  close
});
</script>

<style lang="scss" scoped>
.mt-more-checkbox_content {
  border-top: 2rpx solid #f3f3f3;
  .checked-box {
    display: flex;
    align-items: flex-start;
    padding: 40rpx 32rpx;
    .content {
      flex: 1;
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      .tag {
        display: inline-block;
        font-size: 28rpx;
        color: #1c213e;
        padding: 8rpx 16rpx;
        margin-left: 16rpx;
        background-color: #f5f5f5;
        border-radius: 4rpx;
      }
    }
  }
  .mt-more-checkbox_scroll {
    display: flex;
    padding: 0 32rpx;
    .scroll-view {
      height: 600rpx;
      &.first {
        .scroll-li.active {
          background-color: #f9f9f9;
        }
      }
      &.two {
        background-color: #f9f9f9;
      }
    }
    .scroll-li {
      padding: 0 24rpx;
      .scroll-li_content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 0;
        border-bottom: 2rpx solid #f3f3f3;
        .txt {
          width: 560rpx;
          font-size: 28rpx;
          color: #1c213e;
          word-break: break-all;
        }
      }
    }
  }
}
</style>
